{% stylesheet %}
.block_image {
  position: relative;
  padding: 0;
}

.block_image .block_image-block {
  display: block;
}

.block_image .block_image-block .block-image-pc {
  height: var(--image-height);
  width: 100%;
  object-fit: cover;
}

@media screen and (max-width: 767px) {
  .block_image .block_image-block .block-image-pc {
    display: none;
  }
}

.block_image .block_image-block .block-image-mobile {
  height: calc( var(--image-height ) * 0.6);
  width: 100%;
  object-fit: cover;
}

@media screen and (max-width: 767px) {
  .block_image .block_image-block .block-image-mobile {
    display: block;
  }
}

.block_image .block-image-pc {
  width: 100%;
}

.block_image .block-image-mobile {
  display: none;
}

.block_image .block_image-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background-color: var(--mask-color);
  opacity: var(--mask-opacity);
}

.block_image .block_image-content {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  max-width: 1200px;
  box-sizing: border-box;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 110;
  box-sizing: border-box;
}

@media screen and (min-width: 767px) and (max-width: 1200px) {
  .block_image .block_image-content {
    padding: 0 30px !important;
  }
}

@media screen and (max-width: 767px) {
  .block_image .block_image-content {
    padding: 0 15px !important;
  }
}

.block_image .block_image-content .content-title {
  font-weight: 800;
  font-size: 48px;
  color: var(--title_color);
  font-family: var(--title_font_family);
  font-style: var(--title_font_style);
  letter-spacing: var(--title_letter_spacing);
}

@media screen and (max-width: 767px) {
  .block_image .block_image-content .content-title {
    font-size: calc(48px * 0.6);
  }
}

.block_image .block_image-content .content-describe {
  font-size: 16px;
  line-height: 24px;
  color: var(--title_describe);
}

.block_image .content-align-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.block_image .content-align-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.block_image .content-align-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.block_image .content-btn {
  position: relative;
  height: 44px;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  font-size: 0;
  background-color: var(--bg-color);
  padding-left: 66px;
  cursor: pointer;
  background-color: var(--bg-color);
  margin-top: 30px;
}

.block_image .content-btn span {
  display: inline-block;
  height: 44px;
  line-height: 44px;
  color: var(--btn-font-color);
  background-color: var(--btn-bg-color);
  font-size: 14px;
  padding: 0 28px;
  position: relative;
  font-weight: bold;
  overflow: hidden;
}

.block_image .content-btn:hover .punk-btn-icon {
  width: calc(100% + 12px);
}

.block_image .content-btn .punk-btn-icon {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 66px;
  height: 44px;
  background-color: #ffb100;
  align-items: center;
  justify-content: center;
  transition: width 0.25s;
  z-index: 10;
}

.block_image .content-btn .punk-btn-icon::before {
  position: absolute;
  right: -1px;
  top: 0;
  bottom: 0;
  border-top: 50px solid var(--bg-color);
  border-left: 10px solid transparent;
  border-right: 0 solid transparent;
  content: "";
  z-index: 10;
}

.block_image .content-btn .punk-btn-icon svg {
  width: 22px;
  height: 22px;
}

.block_image .content-btn .punk-btn-icon path {
  fill: #fff;
}

.block_image .content-btn span {
  color: var(--color) !important;
}

@media screen and (max-width: 767px) {
  .block_image .content-btn {
    margin-top: 20px;
  }
}

.container-wrapper .block_image-content {
  padding: 0 50px;
}

{% endstylesheet %}
{% assign defaultImageEmpty = 'banner@2x.png' | public_asset_abs_url %} {% if section.settings.is_full %} {% assign wrapper = "container-fill" %} {% else %} {% assign wrapper = "container-wrapper" %} {% endif %} {%- capture href -%} {%- if section.settings.slide_path.url != '' -%} {{ section.settings.slide_path.url | append: '?data_from=' | append: data_from }} {%- else -%} javascript:; {%-endif-%} {%- endcapture -%}

<div class="block_image {{wrapper}} ">
    <a href="{{href}}" class="block_image-block" style="--image-height:{{section.settings.height}}">
        <img data-crop-type="height" data-src="{{ section.settings.web_image.src }}" src="{{ 'banner@2x.png' | public_asset_abs_url }}" alt="{{ section.settings.web_image.alt }}" class="block-image-pc" />

        <img data-crop-type="height" data-src="{{ section.settings.mobile_image.src | default:section.settings.web_image.src }}" src="{{ 'banner@2x.png' | public_asset_abs_url }}" alt="{{ section.settings.mobile_image.alt }}" class="block-image-mobile" />

        <div class="block_image-mask" style="--mask-color:{{ section.settings.mask_color }};--mask-opacity: {{ section.settings.mask_transparent | divided_by : 100  }};"></div>

        <div class="block_image-content content-align-{{ section.settings.text_position }}">
                <h2 class="content-title" style="--title_color:{{ section.settings.title_color }}">{{ section.settings.title }}</h2>
                {% if section.settings.content != '' %}
                <div class="content-describe" style="--title_describe:{{ section.settings.content_color }}">{{ section.settings.content }}</div>
                {% endif %} {% if section.settings.button_text != '' %}
                <div class="content-btn" style="--bg-color:{{ section.settings.button_background_color }};--color:{{ section.settings.button_font_color  }}">
                    <div class="punk-btn-icon">{% include "icon_silde_right" %}</div>
                    <span>{{ section.settings.button_text }}</span>
                </div>
                {% endif %}
        </div>
    </a>
</div>

{% schema %}
{
	"tag": "section",
	"class": "block_image",
	"icon": "icon-dantu",
	"is_global": false,
	"name": {
		"zh_CN": "单图"
	},
	"max_blocks": "",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "图片"
			}
		},
		{
			"type": "card_image",
			"label": {
				"zh_CN": "pc图片"
			},
			"default": {
				"src": "",
				"alt": ""
			},
			"info": {
				"zh_CN": "尺寸建议：大-1920*800px，中-1920*600，小-1920*420"
			},
			"id": "web_image"
		},
		{
			"type": "card_image",
			"label": {
				"zh_CN": "移动端图片"
			},
			"default": {
				"src": "",
				"alt": ""
			},
			"info": {
				"zh_CN": "尺寸建议1242*2000px"
			},
			"id": "mobile_image"
		},
		{
			"type": "card_page_link",
			"label": {
				"zh_CN": "跳转链接"
			},
			"id": "slide_path"
		},
		{
			"type": "card_select",
			"id": "height",
			"option": [
				{
					"label": {
						"zh_CN": "大"
					},
					"value": "800px"
				},
				{
					"label": {
						"zh_CN": "中"
					},
					"value": "600px"
				},
				{
					"label": {
						"zh_CN": "小"
					},
					"value": "420px"
				},
				{
					"label": {
						"zh_CN": "自适应"
					},
					"value": "auto"
				}
			],
			"label": {
				"zh_CN": "图片高度"
			},
			"default": "middle"
		},
		{
			"type": "card_switch",
			"id": "is_full",
			"label": {
				"zh_CN": "宽度铺满"
			},
			"default": true
		},
		{
			"type": "card_slider",
			"id": "mask_transparent",
			"max": "100",
			"min": "1",
			"label": {
				"zh_CN": "蒙层不透明度"
			},
			"default": "40"
		},
		{
			"type": "card_color",
			"id": "mask_color",
			"label": {
				"zh_CN": "蒙层颜色"
			},
			"default": "#000"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "内容"
			}
		},
		{
			"type": "card_input",
			"id": "title",
			"label": {
				"zh_CN": "标题"
			},
			"default": "Image with text overlay"
		},
		{
			"type": "card_text_editor",
			"label": {
				"zh_CN": "简短描述"
			},
			"default": "Image with text overlay",
			"id": "content"
		},
		{
			"type": "card_select",
			"id": "text_position",
			"label": {
				"zh_CN": "标题按钮位置"
			},
			"option": [
				{
					"label": {
						"zh_CN": "居左"
					},
					"value": "left"
				},
				{
					"label": {
						"zh_CN": "居中"
					},
					"value": "center"
				},
				{
					"label": {
						"zh_CN": "居右"
					},
					"value": "right"
				}
			],
			"default": "left"
		},
		{
			"type": "card_color",
			"id": "title_color",
			"label": {
				"zh_CN": "标题颜色"
			},
			"default": "#fff"
		},
		{
			"type": "card_color",
			"id": "content_color",
			"label": {
				"zh_CN": "内容颜色"
			},
			"default": "#fff"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "按钮"
			}
		},
		{
			"type": "card_input",
			"id": "button_text",
			"label": {
				"zh_CN": "按钮标题"
			},
			"default": "show now"
		},
		{
			"type": "card_color",
			"id": "button_background_color",
			"label": {
				"zh_CN": "按钮背景"
			},
			"default": "#000"
		},
		{
			"type": "card_color",
			"id": "button_font_color",
			"label": {
				"zh_CN": "按钮文字"
			},
			"default": "#fff"
		}
	],
	"blocks": [],
	"default": {
		"settings": {
			"web_image": {
				"src": "",
				"alt": ""
			},
			"mobile_image": {
				"src": "",
				"alt": ""
			},
			"slide_path": {
				"type": "",
				"title": "",
				"url": ""
			},
			"height": "420px",
			"is_full": true,
			"mask_transparent": "20",
			"mask_color": "#000",
			"title": "SERIES",
			"content": "",
			"text_position": "center",
			"title_color": "#fff",
			"content_color": "#fff",
			"button_text": "SHOP ALL",
			"button_background_color": "#fff",
			"button_font_color": "#1D1F21"
		},
		"blocks": []
	}
}
{% endschema %}